<template>
  <div class="conteiner">
    <div class="btns">
      <el-button type="primary" size="small" @click="convertHTML">转换为HTML</el-button>
      <el-button type="primary" size="small" disabled>转换为PDF</el-button>
      <el-button type="primary" size="small" disabled>转换为IMG</el-button>
    </div>
    <v-md-editor
      v-model="text"
      height="100%"
      autofocus
      :include-level="[1, 2, 3, 4, 5, 6]"
      left-toolbar="undo redo clear | h bold italic strikethrough quote tip | ul ol table hr | link image code | tip"
      @copy-code-success="handleCopyCode"
    ></v-md-editor>
  </div>
</template>

<script lang="ts" setup>
// http://ckang1229.gitee.io/vue-markdown-editor/zh/#%E4%BB%8B%E7%BB%8D

import { ref } from "vue";
import markdownIt from "markdown-it";
import useCopy from "@/hook/useCopy";

const text = ref("");
const md = new markdownIt();

const convertHTML = () => {
  const html = md.render(text.value);
  useCopy(html);
};

const handleCopyCode = (code: string) => {
  console.log("code: ", code);
};
</script>

<style lang="scss" scoped>
.conteiner {
  width: calc(100% - 20px);
  height: calc(100vh - 164px);

  .btns {
    margin-bottom: 10px;
  }
}
</style>
